body,html{
	width:100%;
	height:100%;
	margin:0px;
	padding:0px;
	overflow:hidden;
}
#start,#challenge,#end,#cartSurface{
	width:100%;
	height:100%;
	float:left;
	padding-top:2%;
	background:lightblue;
	position:absolute;
	display:none;
}
#start{
	display:block;
	padding-top:1%;
}
#end{
	background:transparent;
}
/*start组件样式*/
@keyframes lab{
	0%{
		opacity:0.9;
	}
	25%{
		opacity:0.6;
	}
	50%{
		opacity:0.3;
	}
	75%{
		opacity:0.6;
	}
	100%{
		opacity:0.9;
	}
}
#start .lab{
	color:red;
	font-size:40px;
	font-weight:bold;
	font-style:italic;
	float:left;
	text-shadow:5px 5px 10px pink;
	position:absolute;
	-webkit-transform:rotate(-45deg) translate(-30px,30px);
	animation:lab 2s linear infinite;
}
#start .lab:hover{
	-webkit-transform:rotate(3600deg);
	-webkit-transition:-webkit-transform 2s;
}
#start>#choosePic{
	width:80%;
	height:60%;
	border:2px dashed blue;
	box-shadow:7px 7px 20px blue;
	margin: 0 auto;
	overflow:hidden;
}
#start .font2{
	color:lime;
	font-weight:bold;
	font-size:25px;
	text-shadow:2px 3px 3px green;
}
#start .font1{
	color:lime;
	font-weight:bold;
	font-size:35px;
	text-shadow:3px 4px 5px green;
}
#start>#choosePic>#cdPic{
	width:25%;
	height:60%;
	margin-left:5%;
	margin-top:1%;
	border:2px solid red;
	line-height:80px;
	background:pink;
	float:left;
	overflow:hidden;
}
#start .pics{
	width:100px;
	height:100px;
	margin-top:5px;
	padding:9px;
}
#start .pics:hover{
	-webkit-transform:rotate(360deg) scale(3,3);
	-webkit-transition:-webkit-transform 1.5s;
}
@keyframes but{
	0%{
		background:radial-gradient(at center,purple,skyblue,orange,pink,yellow);
	}
	25%{
		background:radial-gradient(at center,yellow,purple,skyblue,orange,pink);
	}
	50%{
		background:radial-gradient(at center,pink,yellow,purple,skyblue,orange);
	}
	75%{
		background:radial-gradient(at center,orange,pink,yellow,purple,skyblue);
	}
	100%{
		background:radial-gradient(at center,skyblue,orange,pink,yellow,purple);
	}
}
#start input[type=button]{
	width:100px;
	height:100px;
	border:0px;
	border-radius:50%;
	color:red;
	text-shadow:4px 4px 8px red;
	font-size:40px;
	font-weight:bold;
	font-style:italic;
	margin-top:-10px;
	animation:but 1s linear infinite;
}


/*challenge组件样式*/
#challenge .font1{
	font-size:25px;
	font-weight:bold;
	color:purple;
}
#challenge .time{
	width:200px;
	background:none;
	margin-right:8%;
	/*border:none;*/
	float:right;
}
#challenge>#container{
	width:90%;
	height:90%;
	margin:0 auto;
	margin-top:1%;
	border:3px dashed #2d92a9;
	padding-left:105px;
}
#challenge .Challengename{
	width:400px;
	background:none;
	/*border:none;	*/
	float:left;
}
#startArea,#aimArea{
	width:400px;
	height:400px;
	background:pink;
	border:3px solid grey;
	box-shadow:4px 5px 18px grey;
	float:left;
}
#startArea{
	margin-top:50px;
	margin-left:100px;
}
#aimArea{
	margin-top:50px;
	opacity:0.7;
}
#challenge input[type=button]{
	width:100px;
	height:50px;
	border-radius:50%;
	border:none;
	box-shadow:4px 5px 16px blue;
	background:radial-gradient(at center,skyblue,lightblue,blue);
	color:purple;
	font-size:20px;
	font-weight:bold;
	text-shadow:2px 3px 3px pink;
}

.picstylesa1{
	width:200px;
	height:200px;  
	float:left;
}
.picstylesa2{
	width:133.3px;
	height:200px;  
	float:left;
}
.picstylesa3{
	width:133.3px;
	height:133.3px;  
	float:left;
}
.textstyle{
	height:200px;
	width:200px;
	border:none;
	opacity:0;
	display:none;
}
#sa1,#sa2,#sa3{
	display:none;
}

/*end组件样式*/
#end .font{
	color:purple;
	font-size:20px;
	font-weight:bold;
	text-align:center;
}
@keyframes pass{
	0%{
		-webkit-transform:rotate(-720deg) scale(0.5,0.5);
		-webkit-transition:-webkit-transform 2s;
		opacity:1.0;
	}
	50%{
		-webkit-transform:rotate(720deg) scale(0.5,0.5);
		-webkit-transition:-webkit-transform 2s;			
		opacity:0.5;	
	}
	100%{
		-webkit-transform:scale(1.5,1.5);
		-webkit-transition:-webkit-transform 3s;	
		opacity:1.0;
	}
}
#end .pass{
	width:30%;
	margin:0 auto;
	text-align:center;
	font-size:45px;
	font-weight:bold;
	background:radial-gradient(at center,lightblue,blue,pink,yellow,red);
	-webkit-background-clip:text;
	-webkit-text-fill-color:transparent;
	-o--text-fill-color:transparent;
	-moz-text-fill-color:transparent;
	animation:pass 3s linear infinite;
}
#end>#container{
	width:60%;
	height:70%;
	margin:0 auto;
	margin-top:3%;
	border:3px dashed #2d92a9;
	padding-left:105px;
}
#chart{
	list-style:none;
	margin-left:15%;
	margin-top:43%;
}
#chart>li{
	width:100px;
	height:60px;
	background:radial-gradient(at center,yellow,pink);
	border:7px solid skyblue;
	text-align:center;
	border-radius:50%;
	line-height:55px;
	float:left;
}
#end .chart{
	border:12px double lime;
	box-shadow:5px 8px 15px green;
	padding:5px;
	text-align:center;
	color:green;
	font-size:20px;
	font-weight:bold;
	margin-top:2%;
	margin-left:14%;
	border-radius:10px;
	float:left;
	position:absolute;
}
#Et{
	display:inline-block;
}
#Mt{
	display:none;
}
#Ht{
	display:none;
}
@keyframes endC{  /*end动画效果*/
	from{
		-webkit-transform:translate(0px,0px);
		-webkit-transition:-webkit-transform 3s;
	}
	to{
		-webkit-transform:translate(0px,800px);
		-webkit-transition:-webkit-transform 3s;
	}
}
.c{ /*end动态效果中下掉东西的样式*/
	float:left;
	margin-top:-5%;
	font-size:40px;
	/*padding:55px;*/
	user-select:none;
	animation:endC 4s linear infinite;	
}
#end .restart{
	width:120px;
	height:120px;
	border:5px dashed green;
	box-shadow:3px 4px 8px green;
	border-radius:50%;
	background:lime;
	opacity:0.7;
	margin-top:-10%;
	margin-left:5%;
	font-size:28px;
	font-style:italic;
	animation:lab 4s linear infinite;
}
#chart>li:hover{
	color:red;
}
#restart:hover{
	color:red;
	opacity:0.1;
}
